<template>
  <div class="col-full">
    <div class="be-tab">
      <ul class="be-tab-inner clearfix">
        <li :class="['be-tab-item',{isActive:isActive===1}]">
          <span @click="barWidth=48;barOffset=0;isActive=1">我的追番</span>
        </li>
        <li :class="['be-tab-item',{isActive:isActive===2}]">
          <span @click="barWidth=48;barOffset=78;isActive=2">我的追剧</span>
        </li>
      </ul>
      <div class="be-tab-cursor" :style="barStyle"></div>
    </div>
    <div class="sub-empty-bg" v-if="fanList.length==0">
      你暂时还没有追剧哦
    </div>
    <!--番剧组件-->
    <pgc-follow :fanList="fanList" :fan="true" :large="false"></pgc-follow>
    <!--分页-->
    <div style="margin: 10px 0 20px 0;display: flex;">
      <div class="pagination">
        <el-config-provider :locale="zhCn">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              prev-text="上一页" next-text="下一页"
              :total="totalCount" :page-size="pageSize" hide-on-single-page/>
        </el-config-provider>
      </div>
    </div>

  </div>
</template>

<script>
import PgcFollow from "@/components/personalHomepageComponent/tabs/pgcFollow";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export default {
  /**订阅组件**/
  name: "subscribePage",
  components:{
    PgcFollow
  },
  data(){
    return{
      zhCn,
      totalCount:80,
      pageSize:15,
      // 标签默认宽度
      barWidth: 48,
      // 标签偏移量
      barOffset: 0,
      isActive: 1,
      fanList:[
        {badgeBg:'blue',badgeText:'出品',area:'国创 | 中国大陆',rate:'12',episodes:'30'},
        {badgeBg:'blue',badgeText:'独家',area:'番剧 | 日本',rate:'0',episodes:'12'},
        {badgeBg:'blue',badgeText:'独家',area:'番剧 | 日本',rate:'0',episodes:'12'},
        {badgeBg:'blue',badgeText:'出品',area:'国创 | 中国大陆',rate:'0',episodes:'12'},
        {badgeBg:'pink',badgeText:'会员专享',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'pink',badgeText:'限时免费',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'blue',badgeText:'出品',area:'国创 | 中国大陆',rate:'0',episodes:'12'},
        {badgeBg:'pink',badgeText:'会员专享',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'pink',badgeText:'限时免费',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'blue',badgeText:'出品',area:'国创 | 中国大陆',rate:'12',episodes:'30'},
        {badgeBg:'pink',badgeText:'会员专享',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'pink',badgeText:'限时免费',area:'番剧 | 日本',rate:'0',episodes:'24'},
        {badgeBg:'blue',badgeText:'出品',area:'国创 | 中国大陆',rate:'12',episodes:'30'},
        {badgeBg:'blue',badgeText:'独家',area:'番剧 | 日本',rate:'0',episodes:'12'},
        {badgeBg:'blue',badgeText:'独家',area:'番剧 | 日本',rate:'0',episodes:'12'},
      ],
    }
  },
  mounted() {
    this.changeBg(1)
  },
  computed: {
    // 动态计算标签默认宽度和偏移量
    barStyle() {
      return {
        width: `${this.barWidth}px`,
        transform: `translate3d(${this.barOffset}px,0px,0px)`
      }
    },
  },
  methods:{
    // 改变背景
    changeBg(index){
      if (index==1){
        this.$nextTick(()=>{
          if (this.$refs.emptybg === undefined) return
          this.$refs.emptybg.style = 'background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/dbz-hint-33.png) 250px bottom no-repeat'
        })
      }else {
        this.$nextTick(()=>{
          if (this.$refs.emptybg === undefined) return
          this.$refs.emptybg.style = 'background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/dbz-hint-22.png) 250px bottom no-repeat'
        })
      }
    },
    // 分页
    handleCurrentChange(currentPage){
      console.log('当前页：',currentPage)
    },

  },


}
</script>
<style>
.pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00a1d6;
  color: white;
}
</style>
<style scoped>
.pagination{
  margin: auto;
}

.col-full {
  background: #fff;
  box-shadow: 0 0 0 1px #eee;
  border-radius: 4px;
  padding: 20px;
}
.be-tab {
  margin-bottom: 20px;
  height: 25px;
}

.be-tab, .be-tab-item {
  position: relative;
}

.be-tab-inner {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

.clearfix {
  display: block;
}


.be-tab-item {
  padding-bottom: 5px;
  margin-right: 30px;
  font-size: 12px;
  float: left;
  line-height: 15px;
  vertical-align: top;
  cursor: pointer;
}
.isActive {
  color: #00a1d6;
}
.be-tab-cursor {
  background: #00a1d6;
  height: 1px;
  transition: all .2s ease;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.be-tab-cursor::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 5px solid #00a1d6;
  border-top: 0;
  border-left: 3px dashed transparent;
  border-right: 3px dashed transparent;
}
.sub-empty-bg{
  color: #6d757a;padding: 344px 0 80px 0;
  overflow: hidden;
  text-align: center;
  background-image: url(https://images.weserv.nl/?url=//s1.hdslb.com/bfs/static/space/nodata02.png);
  background-position: center 120px;
  background-repeat: no-repeat;
}
</style>
